<template>
  <div class="identity">
     <van-nav-bar
       title="请选择您的身份"
       left-arrow
       @click-left="onClickLeft"
     />
     <div class="choose">
       <span v-for="(item,index) in choice" :key="index" @click="getChoice(index)"  :class="{active:index===currentIndex}">{{item}}</span>
     </div>
     <p @click="affirm">确认选择</p>
  </div>
</template>

<script>
import { ref,computed } from "vue";
import { useRouter } from "vue-router";
import { modifyUserInfo } from "../utils/api.js";
import { useStore } from "vuex";
export default {
setup(){
   const router=useRouter();
   const store=useStore();
   const currentIndex=ref(null);

   const onClickLeft = () =>{
      router.push('/personalinfo');
    };
    const choice=ref(["其他","个体种植户","个体养殖户","企业种植户","企业养殖户","超市","餐饮店","酒店","中间商","家庭农场","批发商","电商","食堂","贸易公司"]);

    const modify=ref({
      user_identity:'',
      token:'',
    });

    //点击选择
    const getChoice=(i)=>{
       modify.value.user_identity=String(i);
       currentIndex.value=i;   
    }
    //确认选择
    const affirm=()=>{
      sendChoice();
      router.push("/personalinfo");
    }

    //发送选择
    const sendChoice=async ()=>{
       if(localStorage.getItem("userToken")){
         modify.value.token=localStorage.getItem("userToken");
         const data=modify.value;
         const afterModify=await modifyUserInfo(data);
         console.log("afterModify:",afterModify);
        if(afterModify.status==0){
          store.state.userInfo.user_identity=modify.value.user_identity;
        }
       }
    }

    const information=computed(() => store.state.userInfo);


    
  return {onClickLeft,choice,modify,getChoice,currentIndex,affirm}
}
};
</script>
<style lang="scss" scoped>
.identity{
  font-size:16px;
  background:#fff;
  height:667px;
  width:100%;
  .choose{
    display:flex;
    justify-content: space-between;
    padding:40px 60px;
    flex-wrap: wrap;
    span{
      display:inline-block;
      width:40%;
      height:30px;
      line-height:30px;
      text-align: center;
      margin:10px 0;
      background: rgba(240, 234, 234, 0.979);
      border-radius: 15px;
    }
    .active{
      background:rgb(83, 182, 140);
    }
    
  }
  p{
      width:70%;
      height:30px;
      border-radius: 15px;
      line-height:30px;
      text-align: center;
      position:fixed;
      bottom:20px;
      left:15%;
      background: rgb(83, 182, 140);
      color:#fff;
    }
}
</style>
